<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { ref, computed } from 'vue'
const modelValue = defineModel()

const jump_page = ref(1)

const jumpPage = () => {
  // console.log(modelValue)
  if (jump_page.value >= 1 && jump_page.value <= maxPage.value) {
    modelValue.value.page = jump_page.value
  }
}

const nextPage = () => {
  if (modelValue.value.page < maxPage.value) {
    modelValue.value.page += 1
  }
}

const prevPage = () => {
  if (modelValue.value.page > 1) {
    modelValue.value.page -= 1
  }
}

const maxPage = computed(() => {
  return Math.ceil(modelValue.value.total / modelValue.value.size)
})
</script>

<template>
  <div class="pagination">
    <div style="font-size: 0.75rem">第{{ modelValue.page }}/{{ maxPage }}页</div>
    <div class="btn-group">
      <AlexBtn radius="0.3rem" width="3.5rem" height="1.5rem" class="cur-pointer" @click="prevPage">上一页</AlexBtn>
      <AlexBtn radius="0.3rem" width="3.5rem" height="1.5rem" class="cur-pointer" @click="nextPage">下一页</AlexBtn>
    </div>

    <div class="to-page">
      到
      <input type="number" class="btn btn-link btn-action right-btn uni-bg uni-shadow" :min="1" :max="maxPage" v-model="jump_page" />
      页
      <AlexBtn radius="0.3rem" width="3.5rem" height="1.5rem" class="cur-pointer ml-2" @click="jumpPage">确定</AlexBtn>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.alex-btn {
  --alex-font-size-base: 0.8rem;
  --alex-btn-bg: #fff;

  margin: 0;

  color: #66758c;
  outline: none;
  border: solid 0.1rem #d8d8d8 !important;
  border-right: none;
  box-sizing: border-box;

  &:hover {
    box-shadow: 0 0 0 0.1rem rgba(51, 102, 255, 0.2) !important;
    --alex-btn-bg: rgba(51, 102, 255, 0.1);
  }

  &:focus {
    color: #3366ff !important;
    box-shadow: 0 0 0 0.1rem rgba(51, 102, 255, 0.2) !important;
    --alex-btn-bg: rgba(51, 102, 255, 0.1);
  }
}
.pagination {
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--color-999);

  div {
    margin-right: 1rem;
    &:last-child {
      margin-right: 0;
    }
  }

  .btn-group {
    display: inline-flex;
    .alex-btn {
      margin: 0;
      &:first-child {
        border-radius: 0.3rem 0 0 0.3rem;
      }
      &:last-child {
        border-right: 0.1rem solid #d8d8d8;
        border-radius: 0 0.3rem 0.3rem 0;
      }
    }
  }

  .to-page {
    display: flex;
    align-items: center;

    input {
      margin: 0 0.4rem;
      height: calc(1.5rem - 0.1rem);
      width: 3rem;
      border: solid 0.1rem #d8d8d8;
      &:focus {
        box-shadow: 0 0 0 0.1rem rgba(51, 102, 255, 0.2) !important;
        background-color: rgba(51, 102, 255, 0.1) !important;
      }
    }
  }
}
</style>
